<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,
			body {
				margin: 0;
				padding: 0;
				height: 100%;
				overflow: auto;
			}

			body::-webkit-scrollbar {
				width: 0px;
			}

			#box {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
	</body>
	<script src="data.js" type="text/javascript" charset="utf-8"></script>
	<script src="jQuery.js" type="text/javascript" charset="utf-8"></script>
	<script src="echarts.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var myChart = echarts.init(document.getElementById('box'), null, {
			renderer: 'svg'
		});
		echarts.registerMap('HK', data); //注册HK地图后续会用到,内网开发时数据源需要提前准备，这一步只是地图底图渲染
		myChart.setOption({
			roam: true,
			title: {
				left: 'center',
				text: '香港18区人口密度',
				subtext: '人口密度数据来自维基百科（2011）'
			},
			tooltip: {
				trigger: 'item',
				formatter: '{b}<br/>{c} (p / km2)'
			},
			toolbox: {
				itemSize: 20,
				show: true,
				orient: 'vertical',
				left: 'left',
				top: 'center',
				feature: { //工具栏  下方可以自定义
					dataView: {
						readOnly: false
					},
					restore: {},
					saveAsImage: {}
				}
			},
			visualMap: {
				min: 800,
				max: 50000,
				text: ['High', 'Low'],
				realtime: false, //用户操作时，是否实时更新。
				calculable: true, //是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
				inRange: {
					color: ['lightskyblue', 'yellow', 'orangered']
				},
				left: 'right',
				top: 'center'
			},
			series: [{
				name: '香港18区人口密度',
				type: 'map',
				mapType: 'HK', // 自定义扩展图表类型
				label: {
					show: true
				},
				data: data2,
				// 自定义名称映射 这一步至关重要  有的不需要有的需要 这个比较特殊
				nameMap: data3
			}]
		})
	</script>
</html>
